<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<style>
			#btn {
				/* margin-top: 9px; */
			}

			.mui-bar .mui-icon {
				padding-top: 0;
			}

			#p {
				float: right;
				line-height: 44px;
			}

			.mui-grid-view.mui-grid-9 {
				background-color: white;
			}

			/* .mui-grid-view.mui-grid-9 .mui-table-view-cell {
				border: 1px solid #0070ff;
				padding: 10px;
				border-radius: 10px;
				width: 100px;
				height: 100px;
				margin: 10px;
			} */
			.mui-table-view.mui-grid-view {
				width: 84%;
				display: block;
				margin: 0 auto;
			}

			.mui-grid-view.mui-grid-9 {
				border-left: 0;
			}


			.img1 {
				width: 30px;
				height: 20px;
				display: block;
				margin: 0 auto;
			}

			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				border-bottom: 0;
			}

			.mui-segmented-control.mui-scroll-wrapper {
				height: 150px;
			}

			#ul1 {
				float: left;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav" id="head">
			<!-- <h4 style="line-height: 34px;">恒大城</h4> -->
			<h4 style="line-height: 34px;">请绑定房屋<span class="mui-icon mui-icon-arrowdown"
					style="padding-bottom: 0;"></span></h4>
			<!-- <p id="p">xx单元xx号</p> -->
		</header>

		<div class="mui-content">
			<div id="box1">
				<div class="mui-card">
					<div id="slider" class="mui-slider"><!-- 内含box-2 -->
						<div class="mui-slider-group mui-slider-loop">
							<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
									<div id="box-2">图片一</div>
								</a>
							</div>
							<!-- 第一张 -->
							<div class="mui-slider-item">
								<a href="#">
									<div id="box-2">图片一 </div>
								</a>
							</div>
							<!-- 第二张 -->
							<div class="mui-slider-item">
								<a href="#">
									<div id="box-2">图片二</div>
								</a>
							</div>
							<!-- 第三张 -->
							<div class="mui-slider-item">
								<a href="#">
									<div id="box-2">图片三</div>
								</a>
							</div>
							<!-- 第四张 -->
							<div class="mui-slider-item">
								<a href="#">
									<div id="box-2">图片四</div>
								</a>
							</div>
							<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
									<div id="box-2">图片一</div>
								</a>
							</div>
						</div>
						<div class="mui-slider-indicator">
							<div class="mui-indicator mui-active"></div>
							<div class="mui-indicator"></div>
							<div class="mui-indicator"></div>
							<div class="mui-indicator"></div>
						</div>
					</div>

				</div>


				<div class="mui-card">
					<ul class="mui-table-view mui-grid-view mui-grid-9">
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							<a href="#">
								<span class="mui-icon mui-icon-home"></span>
								<div class="mui-media-body">社区养老</div>
							</a>
						</li>
						<li id="yiliao" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							<a href="#">
								<span class="mui-icon mui-icon-email"></span>
								<div class="mui-media-body">社区医院</div>
							</a>
						</li>
						<li id="shitang" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							<a href="#">
								<span class="mui-icon mui-icon-chatbubble"></span>
								<div class="mui-media-body">社区食堂</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							<a href="#">
								<span class="mui-icon mui-icon-location"></span>
								<div class="mui-media-body">Location</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							<a href="#">
								<span class="mui-icon mui-icon-search"></span>
								<div class="mui-media-body">Search</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							<a href="#">
								<span class="mui-icon mui-icon-phone"></span>
								<div class="mui-media-body">Phone</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-phone"></span>
				<span class="mui-tab-label">生活</span>
			</a>
			<a id="wode" class="mui-tab-item">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>

		<script src="../js/mui.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/req.js"></script>
		<script type="text/javascript">
			mui.init()

			mui.ready(function() {
				
				mui.plusReady(function () {
				     plus.navigator.closeSplashscreen();
				})
				
				mui('.mui-slider').slider({
					interval: 1000
				})

				getList()

				//首页返回键处理
				//处理逻辑：1秒内，连续两次按返回键，则进入后台；
				var first = null;
				mui.back = function() {
					//首次按键，提示‘再按一次退出应用’
					if (!first) {
						first = new Date().getTime();
						mui.toast('再按一次退出应用');
						setTimeout(function() {
							first = null;
						}, 1000);
					} else {
						if (new Date().getTime() - first < 1000) {
							var main = plus.android.runtimeMainActivity();
							main.moveTaskToBack(false);
						}
					}
				};

			})

			function getList() {
				mui.ajax(apiurl + 'api/getRoomRecord?certState=1', {
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						"Authorization": localStorage.getItem("token")
					},
					success: function(data) {
						console.log(data)
						if (data.code == 200) {

							console.log(data.data)

							mui.each(data.data, function(index, element) {

								var ele =
									`
							<h4 style="line-height: 34px;">${element.community}</h4>
							`;
								$("#head").html(ele)
							})
						}
					},
					error: function(xhr, type, errorThrown) {
						console.log(type)
					}
				});
			}

			mui('.mui-bar').on('tap', '#btn', function() {
				console.log("绑定房屋按钮绑定点击事件成功")
				mui.openWindow('roomBind.html', 'roomBind', {})
			})

			mui('.mui-table-view').on('tap', '#shitang', function() {
				console.log("社区食堂按钮绑定点击事件成功")
				mui.openWindow('eating.html', 'eating', {})
			})

			mui('.mui-table-view').on('tap', '#yiliao', function() {
				console.log("社区食堂按钮绑定点击事件成功")
				mui.openWindow('hospital.html', 'hospital', {})
			})

			mui('.mui-bar').on('tap', '#wode', function() {
				console.log("绑定房屋按钮绑定点击事件成功")
				mui.openWindow('my.html', 'my', {})
			})
		</script>
	</body>


</html>